import React, { Component } from 'react';
import { Table, Input, Form, Button, Space, Modal, Radio } from 'antd';
import { apiAPPVersionPage, apiAPPVersionAdd, apiAPPVersionEdit, apiAPPVersionDetail, apiAPPVersionDelet } from "@/request/app/version.js"
import TheButton from "@/components/TheButton";
import TheDialog from '@/components/TheDialog';
import ThePagination from "@/components/ThePagination";
import TheQuill from '@/components/TheQuill';
import "./style.less";

const {TextArea } = Input

const controls = {
  controls: [
    "undo",
    "redo",
    "separator",
    // "font-size",
    "text-color",
    "bold",
    // "italic",
    "underline",
    // "strike-through",
    // "separator",
    // "superscript",
    // "subscript",
    // "remove-styles",
    // "emoji",
    "separator",
    // "text-indent",
    "text-align",
    "separator",
    // "headings",
    "list-ul",
    "list-ol",
    // "blockquote",
    "separator",
    // "link",
    // "separator",
    // "separator",
    // "separator",
    "clear",
  ],
  extendControls: []
}
class Appversion extends Component {
  formRef = React.createRef()
  state = {
    loading: false,
    dataSource: [],
    columns: [
      {
        title: '版本类型',
        dataIndex: "appType",
        key: "appType",
        align: 'center',
        editable: true,
      },
      {
        title: '版本号',
        dataIndex: "updateVersion",
        key: "updateVersion",
        align: 'center',
      },
      {
        title: '备注',
        dataIndex: "reason",
        key: "reason",
        align: 'center',
      },
      {
        title: '是否强更',
        dataIndex: "forceUpdate",
        key: "forceUpdate",
        align: 'center',
        render: (text)=>{
          return text === 'Y' ? "是" : "否"
        }
      },
      {
        title: "操作",
        align: 'center',
        width: '20%',
        render: (text, render) => {
          return (
            <div>
              <TheButton haspermi={['app:version:edit']} onClick={() => this.addDialog(render.forceId)}>编辑</TheButton>
              <TheButton haspermi={['app:version:del']} onClick={() => this.deleteAnimation(render.forceId)}>删除</TheButton>
            </div>
          );
        },
      }
    ],
    visible: false,
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    isModalOpen: false,
    forceId: '',
    initialValues:{
      forceUpdate:'N',
      appType:'IOS'
    },
    title:'',
    reason: null
  }

  async componentDidMount() {
    await this.getData()
  }

  getData = async () => {
    const { pageData } = this.state
    await apiAPPVersionPage({ ...pageData }).then(res => {
      if (res.code === 0) {
        this.setState({
          dataSource: res.data,
          total: res.totalCount
        })
      }
    })
  }

  addDialog = async (forceId) => {
    if(forceId){
      let res = await apiAPPVersionDetail(forceId)
      if(res.code === 0){
        this.setState({
          reason: res.data.reason,
          initialValues: res.data,
          title:'编辑',
          visible: true,
          forceId
        })
      }
    }else{
      this.setState({
        title:'新增',
        visible: true,
        initialValues: {
          forceUpdate:'N',
          appType:'IOS'
        },
        reason: null
      })
    }
  }

  closeDialog = () => {
    this.setState({
      visible: false
    })
  }

  setNewsContent = (data) => {
    this.formRef.current.setFieldsValue({ reason: data })
  }

  addActive = async () => {
    let val = this.formRef.current.getFieldsValue()
    if(val.reason === undefined || val.reason === null) {
      delete(val.reason)
    }
    const { forceId, title} = this.state
    if(title === '新增'){
      await apiAPPVersionAdd({ ...val }).then(res => {
        console.log(res);
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '新增成功'
          })
          this.closeDialog()
          this.getData()
        }
      })
    }else{
      await apiAPPVersionEdit({ ...val,forceId }).then(res => {
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '编辑成功'
          })
          this.closeDialog()
          this.getData()
        }
      })
    }
    
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  }

  deleteAnimation = async (id) => {
    this.setState({
      isModalOpen: true,
      forceId:id
    })
  }

  handleOk = async () => {
    const { forceId } = this.state
    await apiAPPVersionDelet({forceId}).then(res => {
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '删除成功'
        })
        let { pageNo, pageSize } = this.state.pageData
        let { total } = this.state
        if (total % pageSize == 1) {
          this.setState({
            pageData: {
              pageNo: pageNo - 1,
              pageSize: pageSize
            }
          })
        }
        this.getData()
      }
    })
    this.setState({
      isModalOpen: false
    })
  }

  handleCancel = () => {
    this.setState({
      isModalOpen: false
    })
  }

  render() {
    const { loading, dataSource, visible, columns, total,title, isModalOpen, initialValues, reason } = this.state
    const { pageNo, pageSize, } = this.state.pageData
    return <div className={"p-layout-box configuration"}>
      <div style={{ width: "120px", marginBottom: "10px" }}>
        <TheButton haspermi={['app:version:add']} size='middle' type='primary'  onClick={()=>this.addDialog()}>新增</TheButton>
      </div>
      <div className={'platform-set-list'}>
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          loading={loading}
          pagination={false}
          {...this.props}
        />
        <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
      </div>
      <TheDialog
        visible={visible}
        title= {title+"APP版本记录"}
        width={"50%"}
        handleCancel={this.closeDialog}
        footer={null}
      >
        <Form ref={this.formRef} onFinish={(values)=>this.addActive(values)} labelCol={{ span:4,offset:0 }} initialValues={initialValues} >
          <Form.Item label="版本号" name="updateVersion" rules={[{ required: true, pattern: /^[0-9]\d*\.?\d*/, message:'版本号与模式不匹配，仅支持数字和“.”' }]}>
            <Input placeholder='请输入版本号' />
          </Form.Item>
          <Form.Item label="版本类型" name="appType" rules={[{ required: true }]}>
            <Radio.Group defaultValue={'IOS'} >
              <Radio value={'IOS'} >IOS</Radio>
              <Radio value={'Android'} >Android</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="备注" name="reason" rules={[{ required: false }]}>
            {/* <TextArea  maxLength={200}></TextArea> */}
            <TheQuill controls={controls} height="30vh" defaultValue={reason} setNewsContent={this.setNewsContent} />
          </Form.Item>
          <Form.Item label="是否强更" name="forceUpdate" rules={[{ required: true }]}>
            <Radio.Group defaultValue={'N'} >
              <Radio value={'Y'} >是</Radio>
              <Radio value={'N'} >否</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
              <Space>
                <Button onClick={this.closeDialog}>取消</Button>
                <Button type="primary" htmlType='submit'>确认</Button>
              </Space>
            </div>
          </Form.Item>
        </Form>
      </TheDialog>
      <Modal title="提示" visible={isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel}>
        是否确认删除该版本记录？
      </Modal>
    </div>
  }
}

export default Appversion